<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="referrer" content="no-referrer" />
</head>
<body>

    <img src="https://bkimg.cdn.bcebos.com/pic/4d086e061d950a7b02082671a18575d9f2d3572c6373?x-bce-process=image/crop,x_0,y_0,w_730,h_420https://img0.baidu.com/it/u=3032776730,2178451350&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">

    <script>

        // 请求的状态码  readyState  0 - 1 -2 -3 -4
        // 返回的响应码  status   只有一个  



        // 1 创建一个对象   --- 创建一个http请求                
        const xhr = new XMLHttpRequest() ;
        // console.log(xhr.readyState);  // 0
        // 2 确认请求方式，请求的地址   ---- 第三个参数表示是否异步   
        xhr.open('get' , '../data/1.txt' , true) ;
        // console.log(xhr.readyState);  // 1
        // 3 发送请求
        xhr.send() ;
        // 4 等待状态的改变
        xhr.onreadystatechange = function() {
            // console.log(xhr.readyState);  // 
            // // 前端状态的改变  xhr.readyState   0  1  2  3  4
            // // 后端返回的状态  200 / 404 / 500
            // console.log(xhr.status);

            if(xhr.readyState === 4 && xhr.status === 200) {   // 等到成功的时候
                const data = xhr.responseText ;   // 后端返回的数据
                console.log(data);
            }
        }

    </script>
    
</body>
</html>